<template>
  <div class="page-padding-bg  df fd-c">
    <div class="top ">
      <div style="    white-space: nowrap;">
        <span>选择日期：</span>
        <el-date-picker class="search_w" v-model="dateSearch" type="month" placeholder="请选择" @change="search_list" :format="'YYYY-MM'" value-format="YYYY-MM" :disabled-date="disabledDate" />
        <span style="margin-left: 25px;">选择类型：</span>
        <el-select class="search_w" v-model="typeSearch" placeholder="请选择" style="width: 240px" @change="search_list">
          <el-option label="日任务" value="0" />
          <el-option label="周任务" value="1" />
        </el-select>
        <span style="margin-left: 25px;">会议申请人：</span>
        <el-select class="search_w" v-model="applyUser" placeholder="请选择" style="width: 240px" @change="search_list">
          <el-option :label="item.description" :value="item.description" v-for="item in userList" :key="item.name" />
        </el-select>
      </div>

      <div style="margin-left: 25px;    white-space: nowrap;margin-top: 15px;">
        <el-button type="primary" @click="search_list">查询</el-button>
        <el-button @click="search_resert">重置</el-button>
        <el-button @click="expotr_table" type="success">导出</el-button>
      </div>
    </div>
    <div class="content-sign">
      <div class="sign-setting">
        <div class="content">
          <el-scrollbar height="100%">
            <table border>
              <tr>
                <td>评吸会议目的</td>
                <td colspan="5"> <span>{{info.meetingAim }}</span></td>
              </tr>
              <tr>
                <td>会议组织部门</td>
                <td colspan="2">
                  <span>{{ info.meetingOrgName }}</span>
                </td>
                <td>会议申请人</td>
                <td colspan="2">
                  <span>{{ info?.meetingApplyUser || '-' }}</span>
                </td>
              </tr>
              <tr>
                <td>评吸时间</td>
                <td colspan="2">
                  <span>{{info.meetingTime}}</span>
                </td>
                <td>评吸地点</td>
                <td colspan="2"> <span>{{ info.meetingPlace }}</span></td>

              </tr>
              <tr>
                <td>样品种类</td>
                <td colspan="2">单料烟(支)</td>
                <td colspan="3">成品烟(支)</td>
              </tr>

              <tr>
                <td>评吸数量(支)</td>
                <td colspan="2">
                  <span>-</span>
                </td>
                <td colspan="3">
                  <span>{{ info?.meetingSmokeNum  || 0}}</span>
                </td>
              </tr>
              <tr>
                <td :rowspan="infoUserLength">感官评吸人员签字</td>
                <td>序号</td>
                <td>姓名</td>
                <td>单位/部门</td>
                <td>国评技术岗位证书</td>
                <td>备注</td>
              </tr>

              <template v-for="(item,index) in info.dayWeekReportInfoList" :key="index">
                <tr>
                  <td>{{index+1}}</td>
                  <td>{{item.userName}}</td>
                  <td>{{item.orgName}}</td>
                  <td class="">
                    <div class="df ai-c jc-c w100">
                      <!-- <lay-checkbox v-model="item.isQualified" name="like" skin="primary" :value="true">有</lay-checkbox>
                    <lay-checkbox v-model="item.isQualified" name="like" skin="primary" :value="false">无</lay-checkbox> -->
                      <el-checkbox :checked="item.isQualified" label="有" style="  pointer-events: none; cursor: not-allowed; " />
                      <el-checkbox :checked="!item.isQualified" label="无" style="  pointer-events: none; cursor: not-allowed; " />
                      <!-- <el-radio v-model="item.isQualified" :value="true">有</el-radio>
                    <el-radio v-model="item.isQualified" :value="false">无</el-radio> -->
                    </div>
                  </td>
                  <td>
                    {{ item.note || '-' }}
                  </td>
                </tr>
              </template>

              <tr>
                <td colspan="5">参加评吸会议感官评吸人员（共 {{info?.meetingUserCount || '-'}}人）</td>
              </tr>
              <tr>
                <td colspan="5">备注：会议申请人可根据预计到会感官评吸人员人数自行增减表格记录</td>
              </tr>

            </table>
          </el-scrollbar>

        </div>

      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import { layer } from "@layui/layui-vue";
import { ref, onMounted } from "vue";

// 页面初始化
onMounted(() => {
  get_user_list();
  get_list();
});
// 禁止选择的逻辑
const disabledDate = (time) => {
  let flag = false;
  try {
    // 获取当前日期
    const now = new Date();
    // 清除小时等信息，以便只比较年月日
    now.setHours(0, 0, 0, 0);

    // 清除参数时间的日以下的部分
    const incomingDate = new Date(time);
    incomingDate.setHours(0, 0, 0, 0);

    flag = incomingDate > now;
  } catch (err) {
    console.log(err);
  }

  // 如果参数时间大于等于当前时间，则禁止选择
  return flag;
};

const dateSearch = ref();
const typeSearch = ref("0");
const applyUser = ref("");
const search_list = async () => {
  console.log(dateSearch.value);
  console.log(typeSearch.value);
  console.log(applyUser.value);
  await get_list();
};
const search_resert = async () => {
  dateSearch.value = "";
  typeSearch.value = "0";
  applyUser.value = "";
  await get_list();
};
const expotr_table = async () => {
  if (!applyUser.value) {
    layer.msg("会议申请人不能为空", { icon: 2 });
    return false;
  }

  const res = await http.corsApi(
    "/report/downloadStandBook",
    "get",
    {
      month: dateSearch.value,
      applyUser: applyUser.value,
      type: typeSearch.value,
    },
    { is_msg: false, formData: true }
  );
  console.log(res);

  if (res.data) {
    // res 为后端返回的响应对象
    let blob = new Blob([res.data]);
    let url = window.URL.createObjectURL(res.data);
    let a = document.createElement("a");
    a.href = url;
    a.download = decodeURI(res.headers["content-disposition"])?.split("filename=")[1]?.replace(/"/g, "") || new Date().getTime() + ".xls";
    a.click();
    window.URL.revokeObjectURL(url);
    layer.msg("导出成功", { icon: 1, time: 2000 });

    console.log(decodeURI(res.headers["content-disposition"]).split("filename=")[1].replace(/"/g, ""));
  }
};
//
const info = ref<any>([]);
const infoUserLength = ref(0);
const get_list = async () => {
  const res = await http.corsApi("/report/dayInfo", "get", {
    month: dateSearch.value,
    applyUser: applyUser.value,
    type: typeSearch.value,
  });
  console.log(res);
  if (res.data) {
    info.value = res.data;
    // infoUserLength.value = res.data.
  }
};

const userList = ref<any>([]);
const get_user_list = async () => {
  const res = await http.corsApi("/secUser/querySuperadminAccessList", "get", {});
  console.log(res);
  if (res.data) {
    userList.value = res.data;
  }
};
</script>

<style scoped lang="scss">
.content-sign {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  margin-top: 20px;
}
.top {
  > div {
  }
  span {
    white-space: nowrap;
  }
}

.sign-setting {
  width: 100%;
  height: calc(100% - 100px);
  h1 {
    background-color: #fff;
    font-size: 24px;
    padding: 20px 0 80px 30px;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    color: #000;
  }

  .content {
    background-color: #fff;
    // width: 100%;
    // width: 900px;
    //  height: 100%;
    // min-height: 100%;
    height: 100%;
    padding-top: 15px;
    padding: 10px 30px;
    box-sizing: border-box;
    table {
      width: 100%;
      text-align: center;
      background-color: #fff;
      tr {
        td {
          padding: 8px 12px;
          width: 200px;
          input {
            width: 100%;
            height: 100%;
            border: 0 none;
            text-align: center;
          }
          :deep(.el-radio) {
            pointer-events: none;
            cursor: not-allowed;
          }
        }
      }
      .selece {
        :deep(.layui-input) {
          border: 0 none;
          .layui-icon {
            display: none;
          }
          input {
            text-align: center;
          }
        }
      }
      .time {
        :deep(.layui-input) {
          border: 0 none;
          .layui-icon {
            display: none;
          }
          input {
            text-align: center;
          }
        }
      }
    }
  }
}

.el-button {
  border-radius: 0;
}

.page-padding-bg {
  height: calc(100% - 140px);
}
</style>  